<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <link href="{$Think.config.RESOURCEURL}wx_assets/dist/gmu.css{$Think.config.RESOURCE_VER}" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/dist/gmu.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/personCenter/js/mediaQuery.min.js{$Think.config.RESOURCE_VER}"></script>
    <title>{$systemName}</title>
    <style>
        @font-face {
            font-family: 'iconfont';  /* project id 201523 */
            src: url('//at.alicdn.com/t/font_ng0hb2bnfvibe29.eot');
            src: url('//at.alicdn.com/t/font_ng0hb2bnfvibe29.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_ng0hb2bnfvibe29.woff') format('woff'),
            url('//at.alicdn.com/t/font_ng0hb2bnfvibe29.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_ng0hb2bnfvibe29.svg#iconfont') format('svg');
        }
        .iconfont{
            font-family:iconfont;
        }
        body{
            background-color:#F0EFF4;
            font-size:14px;
        }
        .ui-slider{
            background-color:white;
        }
        .ui-slider-item {
            height: 2.96rem;
        }
        .ui-slider-item img{
            max-height:100%;
            max-width:100%;
        }
        .ui-slider-dots{
            left: 50%;
            -webkit-transform: translate(-50%,0);
            transform: translate(-50%,0);
        }
        .container_reg{
            background-color:white;
            margin:10px 0;
        }
        .container_reg ul{
            padding:0 10px;
            box-sizing:border-box;
        }
        .container_reg ul li{
            line-height: 40px;
            border-bottom: 1px solid #E8E8E8;
        }
        .container_reg ul li:last-child{
            border-bottom: 0;
        }
        .container_reg ul li >span{
            display: inline-block;
            width: 75px;
        }
        .container_reg ul li >input{
            width: -webkit-calc(100% - 75px);
            width: calc(100% - 75px);
        }
        .agreement{
            margin:20px 10px;
            color:#9B9B9B;
            font-size:12px;
            position:relative;
        }
        .agreement input{
            margin-right:5px;
            position:absolute;
            top:50%;
            -webkit-transform: translate(0,-50%);
            transform: translate(0,-50%);
            -webkit-appearance: none;
            background-color: white;
            height: 12px;
            width: 12px;
            border-radius: 3px;
        }
        .agreement input.checked:before{
            position: absolute;
            content: "";
            border-bottom: 1px solid #1BACFD;
            border-right: 1px solid #1BACFD;
            width: 3px;
            height: 6px;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            top: 2px;
            left: 4px;
        }
        .agreement>span>a{
           color:#6A7FA6;
        }
        .agreement>span{
            margin-left:15px;
            display:inline-block;
        }
        #register{
            display:block;
            margin:20px 10px;
            padding:10px 0;
            background-color:#1BACFD;
            border-radius:4px;
            text-align: center;
            color:white;
        }
        #register.disabled{
            background-color: #ccc;
            color:white;
        }
        .mask{
            position:fixed;
            height:100%;
            width:100%;
            background-color:rgba(0,0,0,.8);
            top:0;
            display:none;
        }
        .mask .alert{
            position:absolute;
            box-sizing:border-box;
            top:50%;
            width:80%;
            left:50%;
            background-color: white;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            border-radius:5px;
        }
        .mask .alert>h1{
            color:#1BACFD;
            text-align: center;
            line-height:35px;
            border-bottom:1px solid #1BACFD;
        }
        .mask .alert>div{
            padding:10px;
            font-size:12px;
            color:#333;
            line-height:20px;
            max-height:200px;
            overflow-y: scroll;
        }
        .mask .alert>a{
            background-color:#1BACFD;
            color:white;
            display:block;
            padding:5px 0;
            text-align: center;
            width:50%;
            margin:10px auto;
            border-radius:4px;
        }
        select{
            height: 40px;
            border: 0;
            opacity: 0;
            left: 0;
            position: absolute;
            width: 100px;
            margin-right: 5px;
            -webkit-appearance: none;
        }
        i{
            position: absolute;
            right: 10px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div>
        <div class="detail-slider-container" style="margin-top: 0px;position:relative">
        <ul class="pro-list" id="detail-slider" >
            <volist name="registerPic" id="picItem">
                <li l="true">
                    <img class="default" src="{$picItem['picUrl']}">
                </li>
            </volist>
        </ul>
    </div>
    <script type="text/javascript">
        var loop = $("#detail-slider li").size() > 2;
        $("#detail-slider").slider({
            loop: loop,
            imgZoom: false,
            arrow: false,
            autoPlay: false,
            slide: function(e, to, from) {}
        });
        if ($("#detail-slider li").size() > 1) {
            $(".ui-slider-dots").css("marginLeft", $(".ui-slider-dots").width() / 2 * -1);
        } else {
            $(".ui-slider-dots").hide();
        }
    </script>
    <div class="container_reg">
        <ul>
            <li>
                <span>姓名</span><input id="name" type="text" placeholder="请输入您的姓名"/>
            </li>
            <li>
                <span>手机号码</span><input id="phone" type="text" placeholder="请输入手机号码"/>
            </li>
            <li>
                <span>公司名称</span><input id="companyName" type="text" placeholder="请输入公司名称"/>
            </li>
            <li>
                <span>所在城市</span>
                <div style="width:-webkit-calc(100% - 75px);display:inline-block;">
                    <div style="display:inline-block;position:relative">
                        <input type="text" id="azoneIn" readOnly="true" style="width: 100px;">
                        <select name=azone id="azone">
                            <option value="省份" disabled="disabled">省份</option>
                        </select>
                        <i class="iconfont">&#xe6d7;</i>
                    </div>
                  <div style="display:inline-block;position:relative">
                      <input type="text" id="clsIn" readOnly="true" style="width: 100px;">
                      <select name=cls id="cls">
                          <option value=0>选择城区</option>
                      </select>
                      <i class="iconfont">&#xe6d7;</i>
                  </div>
                    <input type="hidden" id="inps" name="inps" size="5" value="">
                </div>
            </li>
        </ul>
    </div>
    <div class="agreement">
        <input type="checkbox"><span>已阅读同意<a>《{$agreementName}》</a></span>
    </div>
    <a id='register' class="disabled">注册</a>
    </div>
    <div class="mask">
        <div class="alert">
            <h1>《{$agreementName}》</h1>
            <div>{$agreement}</div>
            <a>我知道了</a>
        </div>
    </div>
</body>
<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/merchant/js/quhao.js{$Think.config.RESOURCE_VER}"></script>
<script>
    var baseUrl = '{$Think.config.SERVER_HOST}';
    var hrefPath = baseUrl+'call.html?customerId={$customerId}';
    var login = {
        init:function(){
            this._initEvent();
        },
        _initEvent:function(){
            var me = this;
            $("input[type='checkbox']").change(function(){
                if($(this).is(":checked")){
                    $(this).addClass("checked");
                    $("#register").removeClass("disabled");
                }else{
                    $(this).removeClass("checked");
                    $("#register").addClass("disabled");
                }
            });
            $(".agreement a").click(function(){
                $(".mask").show();
            });
            $(".alert a").click(function(){
                $(".mask").hide();
            });
            $("#register").click(function() {
                var p=$.util.getParamAsObject();
                if($(this).hasClass("disabled")){
                    return;
                }
                var name = $("#name").val();
                var companyName = $("#companyName").val();
                var phone = $("#phone").val();
                var province = $("#azone").val();
                var city = $("#cls").find("option:selected").text();
                var areaCode = $("#inps").val();
                if (!name || !companyName || !phone||!province||!city) {
                    $.util.alert("信息不完整!");
                    return;
                }
                var params = {
                    "name":name,
                    "companyName":companyName,
                    "phone":phone,
                    "province":province,
                    "city":city,
                    "areaCode":areaCode
                };
                $.util.pageLoading.show();
                $.req.get("call.json?customerId={$customerId}&module=merchant&method=addMivendorByReg", {
                    params: params
                }, function (data) {
                    if(data.code==0){
                        if(!p){p={};}
                        var myDate = new Date();
                        var time = myDate.getSeconds()+""+myDate.getMilliseconds();
                        p.v=time;
                        p=encodeURIComponent(JSON.stringify(p));
                        location.href = '{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=merchant&method=index&params='+p;
                    }else{
                        $.util.alert(data.msg);
                    }
                    $.util.pageLoading.hide();
                });
            });
        }
    };

    login.init();
</script>
<script>
    wx_share.init({
        "pkg":{
            "appId": '{$pkg.appId}',
            "timestamp": '{$pkg.timestamp}',
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        },
        hide:1
    });
</script>
</html>